.App {
  position: relative;
  height: 100vh;
}
.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}
.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}
.App-title {
  font-size: 1.5em;
}
.App-intro {
  font-size: large;
}
@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.line {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  align-items: center;
}

.line {
  .right {
    display: flex;
    align-items: center;
    span {
      display: inline-block;
      border: 1px solid #eee;
      width: 20px;
      height: 20px;
      text-align: center;
      border-radius: 5px;
      margin-left: 5px;
      line-height: 18px;
    }
  }
}
.goods {
  background-color: #f7f7f7;
  display: flex;
  padding: 10px;
  .goodsLeft {
    margin-right: 10px;
    img {
      width: 114px;
      height: 114px;
    }
  }
  .goodsRight {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .msg {
      display: flex;
      justify-content: space-between;
    }
    .msg1 {
      font-size: 15px;
      color: #222;
      text:nth-child(1) {
        margin-right: 15px;
      }
    }
    .msg2 {
      color: #9c9a9c;
    }
    .msg3 {
      color :#ff0039;
      text {
        border: 1px solid #ff0039;
        font-size: 10px;
        padding: 0 3px;
        border-radius: 5px;
      }
    }
  }
}
.toastBg {
  background-color: rgba(0,0,0,.3);
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  transition: all .3s;
}
.toast {
  position: absolute;
  transition: all .3s;
  //bottom: -50%;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-color: #fff;
}
